<script setup>
import { fetchExitTopic, fetchJoinTopic } from '@/axios/api/topic'
import LfButton from '@/components/commonUI/LfButton.vue'
import settingIcon from '@/components/svgComponents/SettingIcon.vue'
import { usePostByDiscussQuery, usePostByTopicQuery } from '@/composables/usePostDataQuery'
import { useTopicDataQuery } from '@/composables/useTopicDataQuery'
import { useMyInfoQuery } from '@/composables/useUserInfoQuery'
import { useTopicManageStore } from '@/stores/TopicManageStore'
import { computed, ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import FilterBar from '../components/FilterBar/FilterBar.vue'
import PostList from '../components/PostList.vue'
import DiscussFilter from './components/DiscussFilter/DiscussFilter.vue'
import { useTopicPageStore } from './topicPageStore'
import TopPost from './components/TopPost/TopPost.vue'
import ContainerSplitOrFull from '@/components/commonUI/ContainerSplitOrFull.vue'
import { Lock, Unlock, View, Clock, User, ChatRound, Star, Download } from '@element-plus/icons-vue'
import { formatTime } from '@/utils/transIUtils'
import { get, post } from '@/axios/utils/request'
import EmptyExpert from '@/assets/empty-expert.svg'
import { getTopicAttachmentList } from '@/axios/api/file'

const route = useRoute()
const router = useRouter()
const topicManageStore = useTopicManageStore()

const sortFilter = ref(0)
const styleFlag = ref("")
const styleNum = ref(0)

const id = ref(route.params.topicId)

// 附件列表相关
const attachmentList = ref([])
const attachmentPage = ref(1)
const attachmentLimit = ref(10)
const attachmentTotal = ref(0)
const attachmentLoading = ref(false)
const attachmentHasMore = ref(true)

// 获取附件列表
const fetchAttachmentList = async (isLoadMore = false) => {
  if (attachmentLoading.value) return

  attachmentLoading.value = true
  try {
    const res = await getTopicAttachmentList(id.value, attachmentPage.value, attachmentLimit.value)
    if (res.code === 0 && res.result) {
      const newData = res.result.data || []
      if (isLoadMore) {
        attachmentList.value = [...attachmentList.value, ...newData]
      } else {
        attachmentList.value = newData
      }
      attachmentTotal.value = res.result.total || 0
      attachmentHasMore.value = res.result.current_page < res.result.last_page
    }
  } catch (error) {
    console.error('获取附件列表失败:', error)
  } finally {
    attachmentLoading.value = false
  }
}

// 加载更多附件
const loadMoreAttachments = async () => {
  if (!attachmentHasMore.value || attachmentLoading.value) return
  attachmentPage.value++
  await fetchAttachmentList(true)
}

// 下载文件
const downloadFile = (filePath, fileName) => {
  const link = document.createElement('a')
  link.href = filePath
  link.download = fileName
  link.target = '_blank'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)





  //  // 显示下载中提示
  //  ElMessage.info('正在下载文件...')

  //   // 获取文件blob
  //   const response = await fetch(filePath)
  //   if (!response.ok) {
  //     throw new Error('文件下载失败')
  //   }

  //   const blob = await response.blob()

  //   // 创建下载链接
  //   const url = window.URL.createObjectURL(blob)
  //   const link = document.createElement('a')
  //   link.href = url
  //   link.download = fileName
  //   link.style.display = 'none'

  //   // 触发下载
  //   document.body.appendChild(link)
  //   link.click()
  //   document.body.removeChild(link)

  //   // 清理URL对象
  //   window.URL.revokeObjectURL(url)

  //   ElMessage.success('文件下载成功')
}

// 重置附件列表
const resetAttachmentList = () => {
  attachmentList.value = []
  attachmentPage.value = 1
  attachmentTotal.value = 0
  attachmentHasMore.value = true
}


const { userInfo } = useMyInfoQuery()

const topicPageStore = useTopicPageStore()
const discussId = computed(() => topicPageStore.discussId)

const { data, fetchNextPage, hasNextPage, isFetching, isLoading } = usePostByTopicQuery(id, sortFilter)
const flattenedData = computed(() => data.value?.pages.flatMap((page) => page.result.data) ?? [])

const { data: topicDetailData, refetch: refetchTopicDetail } = useTopicDataQuery(id)
const topicDetail = computed(() => {
  return topicDetailData?.value?.result
})

const {
  data: discussData,
  fetchNextPage: discussFetchNextPage,
  hasNextPage: discussHasNextPage,
  isFetching: discussIsFetching,
  isLoading: discussIsLoading,
} = usePostByDiscussQuery(discussId, sortFilter)

const discussFlattenedData = computed(() => discussData.value?.pages.flatMap((page) => page.result.data) ?? [])

const moderator = ref(null)
const adminList = ref([])
const relatedPosts = ref([])
const showFullDesc = ref(false)
const descRef = ref(null)
const isDescOverflow = ref(false)

function checkDescOverflow() {
  if (descRef.value) {
    isDescOverflow.value = descRef.value.scrollHeight > descRef.value.offsetHeight + 2
  }
}

watch(() => topicDetail.value?.description, () => {
  showFullDesc.value = false
  setTimeout(checkDescOverflow, 50)
})
watch(() => topicDetail.value?.templateStyle, (value) => {
  handleStyleChange(parseInt(value) - 1)
})
onMounted(() => {
  setTimeout(checkDescOverflow, 100)
})

// 获取主题详情（版主/管理员）
async function fetchTopicDetailExtra() {
  // if (!topicDetail.value?.id) return

  const res = await get('/topic/detail', { id: id.value })
  console.log(res)
  if (res && res.code === 0 && res.result) {
    moderator.value = res.result.userInfo
    relatedPosts.value = res.result.qualityPost || []
    console.log(moderator.value)
    adminList.value = Array.isArray(res.result.adminList) ? res.result.adminList : []
  } else {
    moderator.value = null
    adminList.value = []
  }
}

// 获取同主题帖子
// async function fetchRelatedPosts() {
//   if (!topicDetail.value?.id) return
//   const params = {
//     topicId: id.value ,
//     page: 1,
//     order: 'id desc'
//   }
//   const res = await post('/post/getListByTopicId', params)
//   if (res && res.code === 0 && res.result && Array.isArray(res.result.data)) {
//     relatedPosts.value = res.result.data.slice(0, 10)
//   } else {
//     relatedPosts.value = []
//   }
// }



// watch(() => topicDetail.value?.id, (id) => {
//   if (id) {
//     // fetchTopicDetailExtra()
//     // fetchRelatedPosts()
//   }
// })

watch(() => topicDetailData, (value) => {
  if (value) {
    console.log(value);

    // fetchTopicDetailExtra()
    // fetchRelatedPosts()
  }
})

onMounted(() => {
  // if (topicDetail.value?.id) {
  fetchTopicDetailExtra()
  // fetchRelatedPosts()
  // }
})

const loadMore = async () => {
  if (topicPageStore.discussId) {
    if (discussIsFetching.value || !discussHasNextPage.value) return
    await discussFetchNextPage()
  } else {
    if (isFetching.value || !hasNextPage.value) return
    await fetchNextPage()
  }
}

const handleFilterChange = (filter) => {
  sortFilter.value = filter
}
const handleStyleChange = (style) => {
  styleNum.value = style
  styleFlag.value = style == 0 ? 'list' : 'gallery'
}
watch(
  () => route.params.topicId,
  (newId) => {
    id.value = newId
    topicPageStore.clearDiscussId()
    resetAttachmentList()
    fetchAttachmentList()
  },
)

onMounted(() => {
  topicPageStore.setDiscussId(route.params.discussId)
  fetchAttachmentList()
})

const handleExitTopic = () => {
  fetchExitTopic({ id: id.value }).then((res) => {
    if (res.code === 0) {
      refetchTopicDetail()
      window.location.reload()
    }
  })
}

const handleJoinTopic = () => {
  if (topicDetail.value.rest) {
    topicManageStore.showTopicSetting()

    console.log(topicDetail.value);
    console.log(route.params.topicId);

    topicManageStore.setTopicSettingData({
      label: '加入主题验证',
      // label: '加入版块验证',
      // value: topicDetail.value.topicName,
      question: topicDetail.value.question,
      topicId: route.params.topicId,
    })
    return
  }

  fetchJoinTopic({ id: id.value }).then((res) => {
    if (res.code === 0) {
      refetchTopicDetail()
      window.location.reload()
    }
  })
}

const handleSettingTopic = () => {
  router.push(`/topicSetting/${id.value}`)
}

const goToRelatedPost = (id) => {
  if (!id) return
  router.push(`/home/post/${id}`)
}
</script>

<template>
  <ContainerSplitOrFull>
    <div class="topic-page-main-layout">
      <div class="topic-main-content flex-1 min-w-0">
        <div class=" max-w-[1600px] mx-auto" v-if="topicDetail" v-infinite-scroll="loadMore" :infinite-scroll-disabled="topicPageStore.discussId ? discussIsFetching || !discussHasNextPage : isLoading || !hasNextPage
          " :infinite-scroll-immediate="true">
          <div>
            <img :src="topicDetail.bgImage" alt="" class="w-full h-[250px] object-fill" />
            <img :src="topicDetail.coverImage" alt=""
              class="w-[100px] h-[100px] rounded-full object-cover -translate-y-[50%] ml-8" />
          </div>

          <div class="p-3 px-8 mt-[-60px]">
            <div class="flex justify-between">
              <div>
                <div class="text-[28px] font-bold mb-1">{{ topicDetail.topicName }}</div>
                <div class="text-sm mb-4">{{ topicDetail.description }}</div>
                <!-- <div class="flex items-center gap-4 mb-4 text-slate-500 text-[15px] font-medium">
                  <span class="flex items-center gap-1">
                    <el-icon :class="topicDetail.isPrivacy ? 'text-orange-400' : 'text-green-500'">
                      <component :is="topicDetail.isPrivacy ? Lock : Unlock" />
                    </el-icon>
                    {{ topicDetail.isPrivacy ? '隐私' : '公开' }}
                  </span>
                  <span class="flex items-center gap-1">
                    <el-icon class="text-blue-400"><View /></el-icon>
                    {{ topicDetail.postCount }} 帖子
                  </span>
                  <span class="flex items-center gap-1">
                    <el-icon class="text-blue-400"><User /></el-icon>
                    {{ topicDetail.userCount }} 成员
                  </span>
                  <span class="flex items-center gap-1">
                    <el-icon class="text-gray-400"><Clock /></el-icon>
                    创建于{{ formatTime(topicDetail.createTime) }}
                  </span>
                </div> -->
              </div>
              <div class="flex gap-2">
                <LfButton v-if="!topicDetail.isJoin" type="primary" @click="handleJoinTopic">加入主题</LfButton>
                <LfButton v-else @click="handleExitTopic">退出主题</LfButton>
                <LfButton v-if="topicDetail.uid === userInfo?.result.uid" :icon="true" @click="handleSettingTopic">
                  <settingIcon />
                </LfButton>
              </div>
            </div>
            <div v-if="!topicDetail.isPrivacy || topicDetail.isJoin">
              <div class="flex mb-3 gap-2 flex-wrap">
                <FilterBar :filter="sortFilter" @change="handleFilterChange" :checked-title="['最新', '最热']"
                  :menu-options="['发帖日期', '浏览次数']" title="排序" />
                <FilterBar :filter="styleNum" @change="handleStyleChange" :checked-title="['列表', '卡片']"
                  :menu-options="['列表', '卡片']" title="浏览模式" />
                <DiscussFilter :discussList="topicDetail?.discussList" />
              </div>

              <TopPost v-if="topicDetail.topPost.length > 0 && styleNum == 0" :data="topicDetail.topPost" />

              <PostList :posts-data="topicPageStore.discussId ? discussFlattenedData : flattenedData" :isNoTops="false"
                :topicExplore="styleFlag" />
            </div>
            <div v-else>
              <div class="text-center text-sm text-[--text-2]">该主题为私密主题，需要加入主题后才能查看~</div>
            </div>
          </div>
        </div>
        <div class="mt-64" v-else> 
          <div class="flex flex-col items-center justify-center">
            <img src="/src/assets/empty-expert.svg" class="w-24 h-24 text-gray-400" alt="禁用图片" />
            <p class="mt-4 text-gray-500 text-lg">该主题已被禁用</p>
          </div>
        </div>
      </div>
      <div class="right-content-box">
        <div class="section-card">
          <!-- <div class="bg-cover bg-center rounded-t-lg section-card-bg" :style="{ backgroundImage: `url(${topicDetail?.bgImage})`, width: '100%', height: '100px' }"></div> -->
          <h3 class="section-title flex items-center gap-2 mt-2">
            <img :src="topicDetail?.coverImage"
              class="w-8 h-8 rounded-full object-cover border-2 border-white shadow" />
            <span class="truncate font-bold text-lg">{{ topicDetail?.topicName }}</span>
          </h3>
          <div class="desc-wrapper relative mt-2">
            <div ref="descRef" :class="['topic-desc', { 'desc-ellipsis': !showFullDesc }]">
              {{ topicDetail?.description || '' }}
            </div>
            <div v-if="isDescOverflow && !showFullDesc" class="show-more-btn" @click="showFullDesc = true">显示更多</div>
            <div v-if="showFullDesc && isDescOverflow" class="show-more-btn" @click="showFullDesc = false">收起</div>
            <div class="flex items-center gap-2 mt-2 text-xs text-slate-500">
              <el-icon class="text-blue-400">
                <Clock />
              </el-icon>
              <span>创建于{{ topicDetail?.createTime ? formatTime(topicDetail.createTime) : '' }}</span>
            </div>
            <div class="flex items-center gap-2 mt-2 text-xs text-slate-500">
              <el-icon :class="topicDetail?.isPrivacy ? 'text-orange-400' : 'text-green-500'">
                <component :is="topicDetail?.isPrivacy ? Lock : Unlock" />
              </el-icon>
              <span>主题属于{{ topicDetail?.isPrivacy ? '非公开' : '公开' }}</span>
            </div>
          </div>
          <div class="section-stats mt-3 flex gap-6 border-t border-blue-100 pt-3 stats-row">
            <div class="stat-item-col pt-2">
              <div class="stat-label">帖子数</div>
              <div class="stat-value">{{ topicDetail?.postCount }}</div>
            </div>
            <div class="stat-item-col pt-2">
              <div class="stat-label">成员数</div>
              <div class="stat-value">{{ topicDetail?.userCount }}</div>
            </div>
          </div>
          <div class="moderators mt-4">
            <h4 class="moderators-title flex items-center gap-1 text-blue-700"><el-icon class="text-blue-400">
                <User />
              </el-icon>主题版主</h4>
            <div class="moderators-list">
              <div v-if="moderator" class="moderator-item moderator-leader">
                <el-avatar :src="moderator.avatar" :size="28" />
                <span class="moderator-name font-bold text-blue-700">{{ moderator.username }}</span>
                <span class="moderator-label">(主题版主)</span>
              </div>
            </div>
            <template v-if="adminList.length">
              <h4 class="moderators-title mt-3 flex items-center gap-1 text-blue-700"><el-icon class="text-blue-400">
                  <User />
                </el-icon>管理员</h4>
              <div class="moderators-list">
                <div v-for="admin in adminList" :key="admin.uid" class="moderator-item">
                  <el-avatar :src="admin.avatar" :size="24" />
                  <span class="moderator-name">{{ admin.username }}</span>
                  <span class="moderator-label">(管理员)</span>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="related-posts">
          <h3 class="related-title flex items-center gap-2 pt-3">
            <el-icon class="text-blue-400">
              <Download />
            </el-icon>主题附件
          </h3>
          <div class="attachment-list">
            <div v-if="attachmentList.length === 0 && !attachmentLoading"
              class="flex flex-col items-center justify-center py-10 text-slate-400">
              <img :src="EmptyExpert" alt="暂无附件" class="w-20 h-20 mb-2 opacity-80" />
              <div class="text-lg font-semibold">暂无附件</div>
            </div>
            <div v-else>
              <div v-for="file in attachmentList" :key="file.id"
                class="attachment-item flex items-center justify-between p-3 hover:bg-blue-50 transition-colors rounded-lg">
                <div class="attachment-info flex-1 min-w-0">
                  <div class="attachment-name text-sm font-medium text-gray-900 truncate" :title="file.fileName">
                    {{ file.fileName }}
                  </div>
                  <div class="attachment-size text-xs text-gray-500 mt-1">
                    {{ file.formattedFileSize || file.fileSizeStr }}
                  </div>
                </div>
                <el-button type="primary" size="small" @click="downloadFile(file.filePath, file.fileName)"
                  class="ml-3 flex-shrink-0">
                  <el-icon class="mr-1">
                    <Download />
                  </el-icon>
                  下载
                </el-button>
              </div>

              <!-- 加载更多 -->
              <div v-if="attachmentHasMore" class="load-more-container text-center py-4">
                <el-button v-if="!attachmentLoading" type="text" @click="loadMoreAttachments"
                  class="text-blue-500 hover:text-blue-700">
                  加载更多
                </el-button>
                <div v-else class="text-gray-500 text-sm">
                  <el-icon class="is-loading mr-1">
                    <Download />
                  </el-icon>
                  加载中...
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="related-posts">
          <h3 class="related-title flex items-center gap-2 pt-3"><el-icon class="text-blue-400">
              <View />
            </el-icon>其主题精华帖子</h3>
          <div class="post-list">
            <div v-if="relatedPosts.length === 0"
              class="flex flex-col items-center justify-center py-10 text-slate-400">
              <img :src="EmptyExpert" alt="暂无帖子" class="w-20 h-20 mb-2 opacity-80" />
              <div class="text-lg font-semibold">暂无其他帖子</div>
            </div>
            <div v-else>
              <div v-for="post in relatedPosts" :key="post.id"
                class="post-item cursor-pointer hover:bg-blue-50 transition rounded-lg px-2 -mx-2"
                @click="goToRelatedPost(post.id)">
                <!-- <div class="post-author flex items-center gap-2">
                  <el-avatar :src="post.userInfo?.avatar" :size="24" />
                  <span class="author-name font-medium">{{ post.userInfo?.username }}</span>
                </div> -->
                <div class="post-title" :title="post.title">{{ post.title }}</div>
                <div class="post-meta flex items-center gap-4 mt-1">
                  <span class="meta-item flex items-center gap-1">
                    <el-icon class="text-blue-400">
                      <View />
                    </el-icon>
                    {{ post.readCount }}
                  </span>
                  <span class="meta-item flex items-center gap-1">
                    <el-icon class="text-blue-400">
                      <ChatRound />
                    </el-icon>
                    {{ post.commentCount || 0 }}
                  </span>
                  <span class="meta-item flex items-center gap-1">
                    <el-icon class="text-blue-400">
                      <Star />
                    </el-icon>
                    {{ post.fabulousCount || 0 }}
                  </span>
                  <span class="meta-date ml-auto text-xs text-slate-400">{{ formatTime(post.createTime) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="tag-list">
          <div class="tag-list-card">
            <div class="tag-list-title flex items-center gap-2 mb-3">
              <el-icon class="text-blue-400"><User /></el-icon>
              标签
            </div>
            <DiscussFilter :discussList="topicDetail?.discussList" />
          </div>
        </div> -->
      </div>
    </div>
  </ContainerSplitOrFull>
</template>

<style scoped lang="scss">
.topic-page-main-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  gap: 40px;
}

.topic-main-content {
  flex: 1 1 0%;
  min-width: 0;
  margin-left: 20px;
}

.right-content-box {
  width: 360px;
  margin-left: 0;
  flex-shrink: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.section-card {
  background: #fafdff;
  border-radius: 16px;
  padding: 0 0 18px 0;
  box-shadow: 0 2px 12px 0 rgba(56, 112, 255, 0.08);
  border: 2px solid #e6eaf2;
  position: relative;
  margin-top: 2px;
  margin-bottom: 0;
  overflow: hidden;
}

.section-card-bg {
  border-radius: 16px 16px 0 0;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0;
  color: #1a1a1a;
  padding: 0 20px;
}

.desc-wrapper {
  position: relative;
  margin-bottom: 8px;
  padding: 0 20px;
}

.topic-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  transition: max-height 0.2s;
  word-break: break-all;
}

.desc-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.9em;
}

.show-more-btn {
  color: #1765ad;
  font-size: 13px;
  cursor: pointer;
  margin-top: 2px;
  display: inline-block;
  background: #fafdff;
  border-radius: 8px;
  padding: 2px 12px;
  margin-left: -8px;
  margin-bottom: 2px;
  box-shadow: 0 1px 4px 0 rgba(56, 112, 255, 0.06);
  transition: background 0.18s, color 0.18s;
}

.show-more-btn:hover {
  background: #e6f0fa;
  color: #145399;
}

.section-stats {
  display: flex;
  margin-bottom: 0;
  gap: 24px;
  padding: 0 20px;
}

.stat-item {
  flex: 1;
  text-align: left;
  font-size: 14px;
  color: #8590a6;
}

.stat-label {
  font-size: 13px;
  color: #8590a6;
  margin-right: 2px;
}

.stat-value {
  font-size: 14px;
  // font-weight: 600;
  color: #1a1a1a;
}

.moderators-title {
  font-size: 14px;
  color: #1a1a1a;
  margin-bottom: 8px;
  padding: 0 20px;
  margin-top: 12px;
}

.moderators-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 4px;
  padding: 0 20px;
}

.moderator-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f6f8fa;
  border-radius: 16px;
  padding: 4px 14px 4px 8px;
  box-shadow: 0 1px 3px rgba(56, 112, 255, 0.04);
  font-size: 14px;
}

.moderator-leader {
  background: linear-gradient(90deg, #e3f0ff 0%, #fafdff 100%);
  border: 1.5px solid #a3c8fa;
}

.moderator-label {
  font-size: 12px;
  color: #1765ad;
  margin-left: 2px;
}

.related-posts {
  background: #fff;
  border-radius: 16px;
  padding: 0 0 10px 0;
  box-shadow: 0 2px 12px 0 rgba(56, 112, 255, 0.08);
  border: 2px solid #e6eaf2;
  position: relative;
}

.related-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #1a1a1a;
  border-bottom: 1.5px solid #e6eaf2;
  padding-bottom: 8px;
  margin-left: 0;
  margin-right: 0;
  background: #fafdff;
  border-radius: 10px 10px 0 0;
  padding: 8px 20px 8px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px;
}

.post-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f2f7;
  background: transparent;
  transition: background 0.18s;
}

.post-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.post-item:hover {
  background: #fafdff;
  border-radius: 8px;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.author-name {
  font-size: 13px;
  color: #444;
}

.post-title {
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  cursor: pointer;
  font-weight: 500;
}

.post-title:hover {
  color: #1765ad;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: #8590a6;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.meta-date {
  margin-left: auto;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 20px;
  gap: 0;
}

.stat-item-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stat-label {
  font-size: 13px;
  color: #8590a6;
  margin-bottom: 2px;
  font-weight: 400;
}

.stat-value {
  font-size: 18px;
  color: #222;
  line-height: 1.1;
}

.tag-list-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px 0 rgba(56, 112, 255, 0.08);
  border: 2px solid #e6eaf2;
  padding: 18px 20px 14px 20px;
  margin-bottom: 0;
}

.tag-list-title {
  font-size: 16px;
  font-weight: 700;
  color: #1765ad;
  border-bottom: 1.5px solid #e6eaf2;
  padding-bottom: 8px;
  margin-bottom: 12px;
  background: #fafdff;
  border-radius: 10px 10px 0 0;
}

.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 20px;
  max-height: 250px;
  overflow-y: auto;
}

.attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  background-color: #f9fafb;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  margin-bottom: 10px;
}

.attachment-item:hover {
  background-color: #f0f7ff;
}

.attachment-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.attachment-name {
  font-weight: 500;
  color: #333;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.attachment-size {
  font-size: 12px;
  color: #666;
}

.load-more-container {
  padding: 10px 0;
  text-align: center;
}
</style>
